import {Spin} from 'antd';
import {ReactNode, Suspense} from 'react';
import {createHashRouter, redirect} from 'react-router-dom';
import App from '@/App';
import NotFound from '@/components/base/NotFound';
import Page from '@/page';

const lazyLoadPage = (node: ReactNode) => {
    return <Suspense fallback={<div className='flex-center'><Spin/></div>}>{node}</Suspense>;
};

const router = createHashRouter([
    {
        path: '*',
        element: <App />,
        errorElement: <NotFound />,
        children: [
            {
                path: 'home',
                element: lazyLoadPage(<Page.Home />)
            },
            {
                path: 'about',
                element: lazyLoadPage(<Page.About />)
            },
            {
                path: '*',
                loader: () => redirect('home')
            }
        ]
    }
]);

export default router;
